<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter/vxe-table';

import { ref, watch } from 'vue';

import { Page } from '@vben/common-ui';

import { DatePicker } from 'ant-design-vue';
import dayjs from 'dayjs';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getSystemLogs } from '#/api/system';

interface Props {
  // 编辑区高度
  activeKey?: string;
}

const props = withDefaults(defineProps<Props>(), {
  activeKey: '',
});
interface RowType {
  id: string;
  username: string;
  ip: string;
  time: string;
  request: string;
  content: string;
}
const searchDate = ref(dayjs(dayjs(new Date()).format('YYYY-MM-DD')));
const gridOptions: VxeGridProps<RowType> = {
  rowConfig: {
    isCurrent: true,
    isHover: true,
  },
  columns: [
    { field: 'id', title: '用户ID', width: 50 },
    { field: 'username', title: '用户名' },
    { field: 'ip', title: 'IP' },
    { field: 'time', title: '时间' },
    { field: 'request', title: '请求链接' },
    { field: 'content', slots: { default: 'content' }, title: '请求参数' },
  ],
  keepSource: true,
  pagerConfig: {
    layouts: ['Total', 'Home', 'PrevPage', 'Number', 'NextPage', 'End'],
    pageSize: 10,
  },
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        const { data } = await getSystemLogs({
          page: page.currentPage,
          limit: page.pageSize,
          searchDate: dayjs(searchDate.value).format('YYYY-MM-DD'),
        });
        return data;
      },
    },
  },
  toolbarConfig: {
    export: true,
    refresh: true,
  },
};

const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
watch(
  () => props.activeKey,
  (value) => {
    if (
      value &&
      value === '4' &&
      typeof gridApi?.grid?.commitProxy === 'function'
    ) {
      gridApi.reload();
    }
  },
  {
    deep: true,
    immediate: true,
  },
);
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #toolbar-tools>
        <DatePicker
          v-model:value="searchDate"
          format="YYYY-MM-DD"
          mode="date"
          @change="gridApi.reload()"
        />
      </template>
      <template #content="{ row }">
        <span>{{ JSON.stringify(row.content) }}</span>
      </template>
    </Grid>
  </Page>
</template>
